<html>
  <head>
    <title>Mark Types</title>
    <script type="text/javascript" src="../protovis-r3.1.js"></script>
    <style type="text/css">
      body { margin: 0; }
      span { float: left; }
    </style>
  </head>
  <body>
    <script type="text/javascript+protovis">

var w = 140,
    h = 140,
    data = [1, 1.2, 1.7, 1.5, .7, .5, .2],
    wiki = "http://code.google.com/p/protovis-js/wiki/",
    y = pv.Scale.linear(0, 2).range(0, h);

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Area)
    .data(data)
    .left(pv.Scale.ordinal(data, pv.index).splitFlush(0, w).by(pv.index))
    .bottom(0)
    .height(y)
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Area")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvArea")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Bar)
    .data(data)
    .left(pv.Scale.ordinal(data, pv.index).splitBanded(0, w).by(pv.index))
    .bottom(0)
    .height(y)
    .width(w / data.length - 3)
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Bar")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvBar")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Dot)
    .data(data)
    .left(pv.Scale.ordinal(data, pv.index).split(0, w).by(pv.index))
    .bottom(y)
    .lineWidth(3)
    .size(20)
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Dot")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvDot")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

<!-- TODO Image -->

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Label)
    .data(data)
    .left(pv.Scale.ordinal(data, pv.index).split(0, w).by(pv.index))
    .bottom(y)
    .textAlign("center")
    .textBaseline("middle")
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Label")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvLabel")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Line)
    .data(data)
    .left(pv.Scale.ordinal(data, pv.index).splitFlush(0, w).by(pv.index))
    .bottom(y)
    .lineWidth(3)
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Line")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvLine")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

<!-- TODO Mark -->
<!-- TODO Panel -->

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Rule)
    .data(data)
    .left(pv.Scale.ordinal(data, pv.index).split(0, w).by(pv.index))
    .bottom(0)
    .height(y)
    .lineWidth(3)
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Rule")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvRule")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

new pv.Panel()
    .def("mouseover")
    .width(w)
    .height(h)
    .left(10)
    .top(10)
  .add(pv.Wedge)
    .data(data)
    .angle(pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI))
    .left(w / 2)
    .bottom(h / 2)
    .innerRadius(Math.min(w, h) / 4)
    .outerRadius(Math.min(w, h) / 2)
  .root.anchor("center").add(pv.Label)
    .visible(function() this.root.mouseover())
    .font("bold 32px sans-serif")
    .text("Wedge")
  .root.add(pv.Bar)
    .fillStyle("rgba(0,0,0,.001)")
    .event("click", function() top.location = wiki + "PvWedge")
    .event("mouseover", function() this.root.mouseover(true))
    .event("mouseout", function() this.root.mouseover(false))
    .cursor("pointer")
  .root.render();

    </script>
  </body>
</html>
